<template>
	<view class="page">
		<view class="nav_barH"></view>
		<!-- 头部 -->
		<view class="padding-lr flex justify-between align-center" style="height: 188rpx;">
			<view @click="navback">
				<uni-icons type="closeempty" size="28" color="#BFBFBF" ></uni-icons>
			</view>
		</view>
		<!-- 欢迎语 -->
		<view style="padding-left: 70rpx;margin-top: 70rpx;">
			<view class="text-xxl text-bold text-333">登录 | 注册</view>
			<view class="text-lg text-666 margin-top-sm">欢迎登录商家端</view>
		</view>
		<!-- 输入手机号 -->
		<view style="padding: 0 70rpx;margin-top: 210rpx;">
			<view class="flex align-center solid-bottom" style="width: 610rpx;height: 90rpx;padding: 0 35rpx;">
				<view class="text-xxl text-999">+86</view>
				<input class="flex-sub margin-lr text-xxl text-333" :focus="true" type="number" v-model="mobile" maxlength="11" />
				<view>
					<uni-icons v-if="mobile" type="closeempty" size="24" color="#999999" @click="refresh"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 获取验证码 -->
		<view style="padding: 0 70rpx;margin-top: 220rpx;">
			<button class="cu-btn round action-btn" :loading="loading" @click="getCode">获取验证码</button>
		</view>
		<view class="flex flex-direction justify-center align-center" style="margin-top: 60rpx;">
			<view class="text-xs text-999">未注册手机号验证后将自动创建平台账号</view>
			<view class="text-xs text-999 margin-top-xs">登录即代表同意<text class="text-xs" style="color: #12A4FF;" @click="look">《平台协议》</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
				loading: false,
			};
		},
		methods: {
			// 获取验证码
			getCode(){
				if(this.loading) return ;
				if(this.mobile.length != 11) return this.$Common.toast('手机号格式不正确');
				this.loading = true;
				let _mobile = this.mobile;
				this.$Request.post(this.$api.common.getverifycode,{
					mobile: _mobile,
					type: 3,
					is_test: 1,
				}).then(res => {
					console.log('验证码',res);
					if(res.code == 1){
						setTimeout(() => {
							this.loading = false;
							uni.navigateTo({
								url: '/pages/login/loginCode?mobile='+_mobile+'&code='+res.data.code
							})
						},800)
					}else{
						this.loading = false;
						this.$Common.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
					this.loading = false;
				})
			},
			// 平台协议
			look(){
				uni.navigateTo({
					url:'/pages/center/message/article/articleDetails?id=1'
				})
			},
			// 退出页面
			navback(){
				uni.navigateBack();
			},
			// 清除
			refresh(){
				this.mobile = '';
	 		},
			// 微信登录
			loginByWx(){
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						console.log('uni.login返回',loginRes);
						uni.getUserInfo({
							provider: 'weixin',
							success: (infoRes) => {
								console.log('uni.getUserInfo返回',infoRes);
								let userInfo = infoRes.userInfo;
								this.$Request.post(this.$api.user.user_wechat_login,{
									type: 1,
									wx_unionid: loginRes.authResult.unionId,
								}).then(res => {
									console.log('三方登录返回',res)
									if(res.code == 1){
										this.$Common.toast(res.msg);
										// uni.setStorageSync('USERINFO', res.data.userinfo);
										// // #ifdef APP-PLUS
										// var client_id = '';
										// client_id = plus.push.getClientInfo().clientid;
										// var user = res.data.userinfo;
										// if(client_id != user.client_id){
										// 	this.$Request.post(this.$api.common.set_client_id,{
										// 		client_id: client_id,
										// 	}).then(result => {
										// 		console.log(result);
										// 		if (result.code == 1) {
										// 			//更新为新的client_id
										// 			user.client_id = client_id;
										// 			this.$store.commit('updateUserInfo',user);
										// 		}
										// 	});
										// }
										// // #endif
										// this.navigateBack({delta: 1});
									}else if(res.code == '-999'){
										uni.setStorageSync('weChatInfo',userInfo);
										uni.navigateTo({
											url: '/pages/login/bind_account'
										})
									}
								}).catch(err => {
									console.error('第三方登录接口报错 =>',err);
								})
							}
						})
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.page{
		height: 100%;
		min-height: 100%;
		background-color: #FFFFFF;
		// background-image: url(../../static/images/login_002.png),url(../../static/images/login_001.png);
		background-position: 0 84rpx,295rpx 650rpx;
		background-size: 455rpx 363rpx,455rpx 480rpx;
		background-repeat: no-repeat,no-repeat;
	}
	.action-btn{
		width: 610rpx;
		height: 90rpx;
		background: linear-gradient(270deg,rgba(240,34,36,1) 0%,rgba(251,71,71,1) 100%);
		box-shadow: 0px 16px 32px rgba(243,45,72,0.24);
		color: #FFF0D5;
		font-size: 32rpx;
	}
	.block-64{
		width: 64rpx;
		min-width: 64rpx;
		height: 64rpx;
		min-height: 64rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.block-64+.block-64{
		margin-left: 20rpx;
	}

</style>
